<template>
  <div id="page">
    <el-scrollbar style="height: 85vh;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>页面管理</span>
          <div class="btn">
            <el-button type="info" @click="getPageInfo">重置</el-button>
            <el-button type="primary" style="margin-left: 2vw;" @click="submit">提交</el-button>
          </div>
        </div>
        <el-collapse accordion v-model="activeNames">
          <el-collapse-item title="公告 + 个人简介 + 标签" name="1">
            <el-form label-position="top" style="width: 100%;" ref="form1" :model="form1" label-width="60px">
              <el-form-item label="公告：">
                <el-input rows="6" maxlength="255" show-word-limit prefix-icon="el-icon-search" type="textarea"
                  v-model="form1.affiche" size="small"></el-input>
              </el-form-item>
              <el-form-item label="个人简介：">
                <el-input rows="6" maxlength="255" show-word-limit prefix-icon="el-icon-search" type="textarea"
                  v-model="form1.intro" size="small"></el-input>
              </el-form-item>
              <el-form-item label="标签：">
                <el-input rows="6" maxlength="255" show-word-limit prefix-icon="el-icon-search" type="textarea"
                  v-model="form1.rests" size="small"></el-input>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="短句库" name="2">
            <el-form label-position="top" ref="form2" :model="form2" label-width="120px">
              <!-- 首页标题 + 英文  -->
              <el-divider content-position="left">首页短句</el-divider>
              <el-row :gutter="10" v-for="(item, index) in form2.short.home_short" :key="'home_short' + index">
                <el-col :span="12">
                  <el-form-item label="首页短句标题：">
                    <el-input rows="6" maxlength="255" show-word-limit prefix-icon="el-icon-search" type="textarea"
                      v-model="item.title" size="small"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="首页短句英文：">
                    <el-input rows="6" maxlength="255" show-word-limit prefix-icon="el-icon-search" type="textarea"
                      v-model="item.body" size="small"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-button @click="form2.short.home_short.push({ ...obj })" style="float:right; margin: 0 1vw 1vw 0"
                type="primary">添加</el-button>
              <div class="divider" style="margin-top: 60px;"></div>
              <!-- 短句库标题 + 内容  -->
              <el-divider content-position="left">短句库</el-divider>
              <el-row :gutter="10" v-for="(item, index) in form2.short.short" :key="'short' + index">
                <el-col :span="12">
                  <el-form-item label="短句标题：">
                    <el-input rows="6" maxlength="255" show-word-limit prefix-icon="el-icon-search" type="textarea"
                      v-model="item.title" size="small"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="短句内容：">
                    <el-input rows="6" maxlength="255" show-word-limit prefix-icon="el-icon-search" type="textarea"
                      v-model="item.body" size="small"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-button @click="form2.short.short.push({ ...obj })" style="float:right; margin: 0 1vw 1vw 0"
                type="primary">添加</el-button>
              <div class="divider" style="margin-top: 60px;"></div>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="教育经历 + 工作经历" name="3">
            <el-form label-position="top" ref="form3" :model="form3" label-width="120px">
              <!-- 教育经历  -->
              <el-divider content-position="left">教育经历</el-divider>
              <el-row :gutter="10" v-for="(item, index) in form3.education" :key="'education' + index">
                <el-col :span="12">
                  <el-form-item label="教育经历标题：">
                    <el-input rows="6" maxlength="255" show-word-limit prefix-icon="el-icon-search" type="textarea"
                      v-model="item.title" size="small"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="教育经历内容：">
                    <el-input rows="6" maxlength="255" show-word-limit prefix-icon="el-icon-search" type="textarea"
                      v-model="item.body" size="small"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-button @click="form3.education.push({ ...obj })" style="float:right; margin: 0 1vw 1vw 0"
                type="primary">添加</el-button>
              <div class="divider" style="margin-top: 60px;"></div>
              <!-- 工作经历  -->
              <el-divider content-position="left">工作经历</el-divider>
              <el-row :gutter="10" v-for="(item, index) in form3.work" :key="'work' + index">
                <el-col :span="12">
                  <el-form-item label="工作经历标题：">
                    <el-input rows="6" maxlength="255" show-word-limit prefix-icon="el-icon-search" type="textarea"
                      v-model="item.title" size="small"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="工作经历内容：">
                    <el-input rows="6" maxlength="255" show-word-limit prefix-icon="el-icon-search" type="textarea"
                      v-model="item.body" size="small"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-button @click="form3.work.push({ ...obj })" style="float:right; margin: 0 1vw 1vw 0"
                type="primary">添加</el-button>
              <div class="divider" style="margin-top: 60px;"></div>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="成长技术栈" name="4">
            <el-form label-position="top" ref="form4" :model="form4" label-width="120px">
              <!-- 成长技术栈  -->
              <el-row :gutter="10" v-for="(item, index) in form4.technology" :key="'technology' + index">
                <el-col :span="9">
                  <el-form-item label="成长技术栈标题：">
                    <el-input rows="9" maxlength="255" show-word-limit prefix-icon="el-icon-search" type="textarea"
                      v-model="item.title" size="small"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="成长技术栈内容：">
                    <el-input rows="9" maxlength="255" show-word-limit prefix-icon="el-icon-search" type="textarea"
                      v-model="item.body" size="small"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="技术栈图片：">
                    <el-upload style="text-align: center;" class="avatar-uploader" action="#"
                      :http-request="(params) => httpRequest(params, index)" :show-file-list="false">
                      <img v-if="item.imageUrl" :src="item.imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-button @click="form4.technology.push({ ...obj, imageUrl: '' })" style="float:right; margin: 0 1vw 1vw 0"
                type="primary">添加</el-button>
              <div class="divider" style="margin-top: 60px;"></div>
            </el-form>
          </el-collapse-item>
        </el-collapse>

      </el-card>
    </el-scrollbar>

  </div>
</template>

<script>
import { getPageInfo, setPageinfo } from '@/api/index'
export default {
  name: 'page',
  data() {
    return {
      temp: '',
      activeNames: [],
      obj: {
        title: '',
        body: '',
      },
      form1: {
        affiche: '',
        intro: '',
        rests: '',
      },
      form2: {
        short: {
        },
      },
      form3: {
        education: [
          {
            title: '',
            body: ''
          }
        ],
        work: [
          {
            title: '',
            body: ''
          }
        ],
      },
      form4: {
        technology: [
          {
            title: '',
            body: '',
            imageUrl: '',
          }
        ],
      }
    }
  },
  created() {
    this.getPageInfo();
  },
  mounted() {

  },
  methods: {
    getPageInfo() {
      getPageInfo().then(res => {
        if (res.data.status) {
          //映射数据
          for (let key in this.form1) {
            this.form1[key] = res.data.results[0][key]
          }
          for (let key in this.form2) {
            this.form2[key] = this.jsontojs(res.data.results[0][key])
          }
          for (let key in this.form3) {
            this.form3[key] = this.jsontojs(res.data.results[0][key])
          }
          for (let key in this.form4) {
            this.form4[key] = this.jsontojs(res.data.results[0][key])
          }
        } else {
          this.$message.error('失败')
        }
      })
    },
    //js 转 json 转化函数
    jstojson(obj) {
      let maxlength = Object.keys(obj).length;
      //深拷贝
      function deepCopy(value) {
        if (value instanceof Function) return value
        else if (value instanceof Array) {
          var newValue = []
          for (let i = 0; i < value.length; ++i) newValue[i] = deepCopy(value[i])
          return newValue
        } else if (value instanceof Object) {
          var newValue = {}
          for (let i in value) newValue[i] = deepCopy(value[i])
          return newValue
        } else return value
      }
      let newobj = deepCopy(obj)
      //定义数组和长度
      for (let i = 0; i < maxlength; i++) {
        if (typeof newobj[Object.keys(newobj)[i]] === 'object') {
          newobj[Object.keys(newobj)[i]] = JSON.stringify(newobj[Object.keys(newobj)[i]])
        }
      }
      //循环判断类型push
      return newobj
    },
    //js 转 json 转化函数
    jsontojs(obj) {
      //深拷贝
      function deepCopy(value) {
        if (value instanceof Function) return value
        else if (value instanceof Array) {
          var newValue = []
          for (let i = 0; i < value.length; ++i) newValue[i] = deepCopy(value[i])
          return newValue
        } else if (value instanceof Object) {
          var newValue = {}
          for (let i in value) newValue[i] = deepCopy(value[i])
          return newValue
        } else return value
      }
      let newobj = deepCopy(obj)
      //定义数组和长度
      newobj = JSON.parse(newobj)
      //循环判断类型push
      return newobj
    },
    submit() {
      let data = { ...this.form1, ...this.jstojson(this.form2), ...this.jstojson(this.form3), ...this.jstojson(this.form4) }
      setPageinfo(data).then(res => {
        if (res.data.status) {
          this.$message.success('成功')
        } else {
          this.$message.error('失败')
        }
      })
    },
    //上传图片
    httpRequest(event, index) {
      this.temp = '';
      let res = !event.file ? event.target.files[0] : event.file; //兼容原生和element 上传
      let reader = new FileReader()
      reader.readAsDataURL(res)
      reader.onload = () => {//加载完立即触发
        this.form4.technology[index].imageUrl = reader.result; // base64字符串
      }
    },
  }
}
</script>

<style lang="less" src="./index.less" scoped></style>